<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- <link type="text/css" rel="stylesheet" href="fs.css" /> -->

<style type="text/css">
h1,h2,h3,h4,h5,h6 {
	font-weight: 700;
	line-height: 140%;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
}

h1 {
	font-size: 1.8em;
	line-height: 100%;
	/*margin-bottom: 20px;*/
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
}

.translate {
	font-family: sans-serif;
	font-size: 0.8em;
}

.userPlaceText {
	font-size: 0.8em;
}

.stats {
	margin: 10px;
	float: left;
}

.userTitleText {
	font-family: sans-serif;
	position: relative;
	margin-right: auto;
}

#userDetails {
	position: relative;
	float: left;
	margin: 10px;
	margin-left: 20px;
	margin-right: 0px;
	min-width: 320px;
	width: 70%;
}

#userPic {
	margin: 10px;
	float: left;
}

#userInfoManagebtn {
	width: 40px;
	position: relative;
	float: right;
	right: 0px;
	position: relative;
}

#userDetails .vcard {
	float: left;
	position: relative;
}

#userStats {
	float: left;
	position: relative;
}

.venueContact {
	
}

#secondTitle {
	float: left;
	vertical-align: middle;
	display: table-cell; /* align center vertically */
	line-height: 100%;
	min-width: 320px;
}

#secondTitle .secondTitleText {
	float: left;
	margin-top: 10px;
	margin-bottom: 10px;
	min-width: 280px;
	/*	width: 400px;	/* 폭이나 높이가 일정해야 합니다. */
	/*	height: 20px;	/* 폭이나 높이가 일정해야 합니다. */
	position: relative;
	top: 50%; /* 화면의 중앙에 위치 */
	/*	left: 50%;	/* 화면의 중앙에 위치 */
	/*	margin: 0px 0 0 10px;	/* 높이의 절반과 너비의 절반 만큼 margin 을 이용하여 조절 해 줍니다. */
}

#secondPic {
	margin: 10px;
	float: none;
}

#vmap {
	float: left;
	margin: 10px;
	width: 95%;
	text-align: center;
}

#vmapImg {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	max-width: 440px;
}

#checkin {
	text-align: center;
	margin: 10px;
	float: left;
	width: 95%;
	float: left;
	margin: 10px;
}

/* buttons */
.buttons a,.buttons button {
	display: block;
	float: left;
	margin: 0 7px 0 0;
	background-color: #f5f5f5;
	border: 1px solid #dedede;
	border-top: 1px solid #eee;
	border-left: 1px solid #eee;
	font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
	font-size: 12px;
	line-height: 130%;
	text-decoration: none;
	font-weight: bold;
	color: #565656;
	cursor: pointer;
	padding: 5px 10px 6px 7px; /* Links */
}

.buttons button {
	width: auto;
	overflow: visible;
	padding: 4px 10px 3px 7px; /* IE6 */
}

.buttons button[type] {
	padding: 5px 10px 5px 7px; /* Firefox */
	line-height: 17px; /* Safari */
}

*:first-child+html button[type] {
	padding: 4px 10px 3px 7px; /* IE7 */
}

.buttons button img,.buttons a img {
	margin: 0 3px -3px 0 !important;
	padding: 0;
	border: none;
	width: 16px;
	height: 16px;
}

/* STANDARD */
button:hover,.buttons a:hover {
	background-color: #dff4ff;
	border: 1px solid #c2e1ef;
	color: #336699;
}

.buttons a:active {
	background-color: #6299c5;
	border: 1px solid #6299c5;
	color: #fff;
}

/* POSITIVE */
button.positive,.buttons a.positive {
	color: #529214;
}

.buttons a.positive:hover,button.positive:hover {
	background-color: #E6EFC2;
	border: 1px solid #C6D880;
	color: #529214;
}

.buttons a.positive:active {
	background-color: #529214;
	border: 1px solid #529214;
	color: #fff;
}

/* NEGATIVE */
.buttons a.negative,button.negative {
	color: #d12f19;
}

.buttons a.negative:hover,button.negative:hover {
	background: #fbe3e4;
	border: 1px solid #fbc2c4;
	color: #d12f19;
}

.buttons a.negative:active {
	background-color: #d12f19;
	border: 1px solid #d12f19;
	color: #fff;
}

/* REGULAR */
button.regular,.buttons a.regular {
	color: #336699;
}

.buttons a.regular:hover,button.regular:hover {
	background-color: #dff4ff;
	border: 1px solid #c2e1ef;
	color: #336699;
}

.buttons a.regular:active {
	background-color: #6299c5;
	border: 1px solid #6299c5;
	color: #fff;
}
</style>
</head>

<body>
	<div id="userInfo">
		<div id="userPic">
			<img src="images/icon_place_coffee.png" width="64" height="64">
		</div>
		<div class="vcard" id="userDetails">
			<div class="userTitleText fn org">
				<h1>Starbucks</h1>
				<div id="venueContact">Selden, NY</div>
			</div>
			<div id="secondTitle">

				<h4 class="secondTitleText">Occupied by Stony Brook Seawolves</h4>
				<div id="secondPic">
					<img src="images/seawolves.gif" width="24" height="24">
				</div>
			</div>

			<div id="userStats">
				<div class="stats">
					<h2>
						<a href="place.jsp"> <img src="images/icon_checkin.png"
							height="32" width="32" alt=""> 736
						</a>
					</h2>
					<span class="translate">Check-ins</span>
				</div>
				<div class="stats">
					<h2>
						<a href="circle.jsp"> <img src="images/icon_calendar.png"
							height="32" width="32" alt=""> 337
						</a>
					</h2>
					<span class="translate">Circles</span>
				</div>
				<div class="stats">
					<h2>
						<a href="UserLists.jsp"> <img src="images/icon_tips.png"
							height="32" width="32" alt=""> 33
						</a>
					</h2>
					<span class="translate">Users</span>
				</div>
			</div>
		</div>

		<div id="checkin">
			<input type="button" class="positive" value="CHECK-IN!"
				style="width: 440px; height: 40px;" />
		</div>
		<div id="vmap">
			<a
				href="http://maps.google.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=14&size=440x440&maptype=roadmap
&markers=color:blue|label:S|40.712147,-74.015794&markers=color:green|label:G|40.711614,-74.012318
&markers=color:red|color:red|label:C|40.710217,-73.998284&sensor=false"><img
				id="vmapImg"
				src="http://maps.google.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=14&size=440x120&maptype=roadmap
&markers=color:blue|label:S|40.712147,-74.015794&markers=color:green|label:G|40.711614,-74.012318
&markers=color:red|color:red|label:C|40.710217,-73.998284&sensor=false" />
			</a>
		</div>

		<div>
			<div id="secondTitle">
				<div id="secondPic" style="float:left;">
					<%@include file="graph.jsp" %>
				</div>
			</div>

		</div>



	</div>
	<!--  user deatils -->


</body>
</html>